<template>
    <div class="carousel">
      <div class="carousel-inner" :style="`transform: translateX(${-currentIndex * 100}%)`">
        <div v-for="(item, index) in items" :key="index" class="carousel-item">
          <div class="item-content">
            <img :src="item.image" alt="carousel-image" style="width: 520px; height: 500px; background-repeat: cover;"/>
            <div class="carousel-caption">
              <blockquote>
                <p>{{ item.quote }}</p>
                <footer>{{ item.author }}</footer>
              </blockquote>
            </div>
          </div>
        </div>
      </div>
      <button @click="prev" class="carousel-control prev">❮</button>
      <button @click="next" class="carousel-control next">❯</button>
      <div class="carousel-indicators">
        <span v-for="(item, index) in items" :key="index" :class="{'active': currentIndex === index}" @click="goTo(index)"></span>
      </div>
    </div>
  </template>
  
  
  <script setup>
  import { ref , onUnmounted } from 'vue';
  
  const items = ref([
  {
      image: 'https://ts1.cn.mm.bing.net/th/id/R-C.e1d558c416b6124b02c9689b5d674912?rik=8pD4%2bbwSwYx8Tw&riu=http%3a%2f%2fkodcloud.com%2fstatic%2fupload%2f2018%2f1109%2f20181109051928905.jpg&ehk=CGTae%2bQaMt5QHALk690Mah0Flal4KpT93Nug0aSOjvI%3d&risl=&pid=ImgRaw&r=0',
      quote: '存储，共享,协作,让企业文件管理更智能',
    //   author: '作者2'
    },
    {
      image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.vA9cKDbt3M5FUO5oQSPZdgHaFj?rs=1&pid=ImgDetMain',
      quote: '开放平台，化生态融合，应用创新与信息化创新赋能。',

    //   author: '111'
    },
    // 继续添加更多的幻灯片
  ]);
  
  const currentIndex = ref(0);
  
  const next = () => {
    currentIndex.value = (currentIndex.value + 1) % items.value.length;
  };
  
  const prev = () => {
    currentIndex.value = (currentIndex.value - 1 + items.value.length) % items.value.length;
  };
  
  const goTo = (index) => {
    currentIndex.value = index;
  };
  const intervalID=setInterval(next, 2000);
  onUnmounted(() => {
    clearInterval(intervalID);
  });

  </script>
  
  <style scoped>
  .carousel {
    position: relative;
    /*  */
    overflow: hidden;
    width: 100%;
    height: 400px; /* 根据需要调整高度 */
    .prev .next {
        width: 0;
    }

  }
  /* &代表父元素 :hover 代表鼠标悬停这是用less来写的 */
  &:hover {
    .prev {
        position: absolute;
        /* 当用户将鼠标移动到那个元素时,它变成一个手形状 */
        cursor:pointer;
        top: 50%;
        left: 30px;
        /* 根据元素自动调整 */
        width:auto;
    }
    .next {
        position: absolute;
        cursor:pointer;
        top: 50%;
        right: 30px;
        width:auto;
    }

  }
  
  .carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
  }
  
  .carousel-item {
    min-width: 100%;
    display: flex; /* 使用 flex 来布局 */
    align-items: center; /* 垂直居中对齐 */
  }
  
  .item-content {
    display: flex;
    width: 100%;
  }
  
  .carousel-item img {
    width: 50%; /* 图片占据一半的宽度 */
    height: auto; /* 自适应高度 */
    object-fit: cover; /* 保持图像比例 */
  }
  
  .carousel-caption {
    padding: 20px;
    width: 50%; /* 文字占据一半的宽度 */
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
  }
  
  .carousel-control {
    /* position: absolute; */
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
  }
  

  
  .carousel-indicators {
    text-align: center;
    margin-top: 10px;
  }
  
  .carousel-indicators span {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: grey;
    margin: 0 5px;
    cursor: pointer;
  }
  
  .carousel-indicators span.active {
    background: blue;
  }
  </style>
  